<template>
  <div class="area-selector">
    <!-- 快速测试组件 -->
    <QuickTest v-if="error" />
    
    <h2>省市区选择器</h2>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      正在加载地区数据...
    </div>
    
    <!-- 错误状态 -->
    <div v-if="error" class="error">
      <p>{{ error }}</p>
      <button @click="areaStore.loadAreaData()" class="retry-btn">
        重新加载
      </button>
    </div>
    
    <!-- 选择器 -->
    <div v-if="!loading && !error" class="selectors">
      <!-- 省份选择 -->
      <div class="selector-group">
        <label for="province">选择省份：</label>
        <select 
          id="province" 
          v-model="areaStore.selectedProvince" 
          @change="onProvinceChange"
          class="selector"
        >
          <option value="">请选择省份</option>
          <option 
            v-for="province in areaStore.provinces" 
            :key="province.id" 
            :value="province.id"
          >
            {{ province.name }}
          </option>
        </select>
      </div>
      
      <!-- 城市选择 -->
      <div v-if="areaStore.cities.length > 0" class="selector-group">
        <label for="city">选择城市：</label>
        <select 
          id="city" 
          v-model="areaStore.selectedCity" 
          @change="onCityChange"
          class="selector"
        >
          <option value="">请选择城市</option>
          <option 
            v-for="city in areaStore.cities" 
            :key="city.id" 
            :value="city.id"
          >
            {{ city.name }}
          </option>
        </select>
      </div>
      
      <!-- 区县选择 -->
      <div v-if="areaStore.districts.length > 0" class="selector-group">
        <label for="district">选择区县：</label>
        <select 
          id="district" 
          v-model="areaStore.selectedDistrict" 
          @change="onDistrictChange"
          class="selector"
        >
          <option value="">请选择区县</option>
          <option 
            v-for="district in areaStore.districts" 
            :key="district.id" 
            :value="district.id"
          >
            {{ district.name }}
          </option>
        </select>
      </div>
      
      <!-- 重置按钮 -->
      <button v-if="areaStore.selectedProvince" @click="areaStore.resetSelection()" class="reset-btn">
        重置选择
      </button>
    </div>
    
    <!-- 选择结果显示 -->
    <div v-if="selectedAreaText" class="result">
      <h3>选择结果：</h3>
      <p class="selected-area">{{ selectedAreaText }}</p>
      <div class="area-details">
        <p v-if="areaStore.selectedProvinceInfo">
          <strong>省份：</strong>{{ areaStore.selectedProvinceInfo.name }} (ID: {{ areaStore.selectedProvinceInfo.id }})
        </p>
        <p v-if="areaStore.selectedCityInfo">
          <strong>城市：</strong>{{ areaStore.selectedCityInfo.name }} (ID: {{ areaStore.selectedCityInfo.id }})
        </p>
        <p v-if="areaStore.selectedDistrictInfo">
          <strong>区县：</strong>{{ areaStore.selectedDistrictInfo.name }} (ID: {{ areaStore.selectedDistrictInfo.id }})
        </p>
      </div>
    </div>
    
    <!-- 数据统计 -->
    <div v-if="areaStore.isDataLoaded" class="stats">
      <h3>数据统计：</h3>
      <p>共有 {{ areaStore.provinces.length }} 个省份</p>
      <p v-if="areaStore.cities.length > 0">
        {{ areaStore.selectedProvinceInfo?.name }} 有 {{ areaStore.cities.length }} 个城市
      </p>
      <p v-if="areaStore.districts.length > 0">
        {{ areaStore.selectedCityInfo?.name }} 有 {{ areaStore.districts.length }} 个区县
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useAreaStore } from '@/stores/area'
import QuickTest from './QuickTest.vue'

const areaStore = useAreaStore()

// 计算选中的地区文本
const selectedAreaText = computed(() => {
  const parts = []
  if (areaStore.selectedProvinceInfo) {
    parts.push(areaStore.selectedProvinceInfo.name)
  }
  if (areaStore.selectedCityInfo) {
    parts.push(areaStore.selectedCityInfo.name)
  }
  if (areaStore.selectedDistrictInfo) {
    parts.push(areaStore.selectedDistrictInfo.name)
  }
  return parts.join(' - ')
})

// 事件处理
function onProvinceChange() {
  if (areaStore.selectedProvince) {
    areaStore.selectProvince(areaStore.selectedProvince)
  }
}

function onCityChange() {
  if (areaStore.selectedCity) {
    areaStore.selectCity(areaStore.selectedCity)
  }
}

function onDistrictChange() {
  if (areaStore.selectedDistrict) {
    areaStore.selectDistrict(areaStore.selectedDistrict)
  }
}

// 组件挂载时加载数据
onMounted(() => {
  areaStore.loadAreaData()
})
</script>

<style scoped>
.area-selector {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
  font-size: 16px;
}

.error {
  background-color: #fee;
  border: 1px solid #fcc;
  border-radius: 4px;
  padding: 20px;
  margin: 20px 0;
  color: #c33;
  text-align: center;
}

.retry-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.retry-btn:hover {
  background-color: #c0392b;
}

.selectors {
  margin: 20px 0;
}

.selector-group {
  margin-bottom: 15px;
}

.selector-group label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
  color: #2c3e50;
}

.selector {
  width: 200px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.selector:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.reset-btn {
  background-color: #95a5a6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.reset-btn:hover {
  background-color: #7f8c8d;
}

.result {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.result h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.selected-area {
  font-size: 18px;
  font-weight: bold;
  color: #27ae60;
  margin-bottom: 15px;
}

.area-details p {
  margin: 5px 0;
  color: #5a6c7d;
}

.stats {
  background-color: #f1f2f6;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.stats h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.stats p {
  margin: 5px 0;
  color: #5a6c7d;
}

@media (max-width: 600px) {
  .area-selector {
    padding: 10px;
  }
  
  .selector-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .selector-group label {
    width: auto;
    margin-bottom: 5px;
  }
  
  .selector {
    width: 100%;
  }
}
</style>